<template>
  <div class="Dailyrecommendation">

    <div class="main">
      <div class="Listtitle">
        <p class="span1">操作</p>
        <p class="span2">标题</p>
        <p class="span3">歌手</p>
        <p class="span4">专辑</p>
        <p class="span5">时间</p>
      </div>
      <div class="Songlist" @click="getcilick1(index)" @dblclick="getmusic(item.id,item.name,item.ar,item.al.picUrl,item.dt)" v-for="(item,index) in dailySongs" :key="item.id" :class="index%2==0?'p':''||index==getcilick?'f':''">
        <span class="span1">{{index+1}}</span>
        <div style="margin-left:15px;">
          <i class="iconfont icon-aixin i1"></i>
          <i class="iconfont icon-xiazai i2"></i>
        </div>
        <span class="span2">{{item.name}}</span>
        <div class="span3">
          <span v-for="(item1,index1) in item.ar" :key="index1">{{item1.name}}</span>
        </div>
        <span class="span4">{{item.al.name}}</span>
        <span class="span5" v-for="(item2,index2) in dt" :key="index2" v-show="index==index2">{{item2}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Bus from '@/components/eventBus.js'
export default {
  name: 'Dailyrecommendation',
  data() {
    return {
      dt: [],
      getcilick: ''
    }
  },
  computed: {
    ...mapState({
      dailySongs: state => state.Home.dailySongs
    })
  },
  mounted() {
    this.$store.dispatch('getRecommendedsongsoftheday')
  },
  methods: {
    //双击音乐名字播放音乐
    getmusic(e, n, v, m, time) {
      Bus.$emit('music', e, n, v, m, time)
    },
    getcilick1(e) {
      this.getcilick = e
    }
  },
  watch: {
    dailySongs: {
      //处理返回的时间
      handler(v, o) {
        this.dt = v.map(val => {
          let m = []
          let s = []
          var d = new Date(val.dt)
          m.push(d.getUTCMinutes())
          s.push(d.getUTCSeconds())
          if (d.getUTCMinutes() < 10 && d.getUTCSeconds() < 10) {
            return '0' + m + ':' + '0' + s
          }
          if (d.getUTCMinutes() < 10) {
            return '0' + m + ':' + s
          }
          if (d.getUTCSeconds() < 10) {
            return m + ':' + '0' + s
          }
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.Dailyrecommendation {
  overflow: hidden;
  .main {
    .Listtitle {
      font-size: 8px;
      opacity: 0.6;
      cursor: alias;
      display: flex;
      width: 1250px;
      margin-left: 50px;
      display: grid;
      margin-bottom: 6px;
      grid-template-columns: 60px 450px 300px 300px 150px;
    }
    .Songlist {
      width: 1250px;

      display: flex;
      align-items: center;
      padding: 8px;
      .span1 {
        font-size: 8px;
        opacity: 0.3;
        margin-left: 20px;
      }
      .i1 {
        opacity: 0.6;
      }
      .i2 {
        opacity: 0.6;
        margin-left: 5px;
      }
      .i1:hover {
        cursor: pointer;
        opacity: 1;
      }
      .i2:hover {
        cursor: pointer;
        opacity: 1;
      }
      .span2 {
        width: 450px;
        font-size: 13.5px;
        opacity: 0.8;
        margin-left: 15px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .span3 {
        font-size: 13.5px;

        width: 300px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        span {
          opacity: 0.5;
        }
        span:hover {
          cursor: pointer;
          opacity: 1;
        }
      }
      .span4 {
        font-size: 13.5px;
        opacity: 0.6;
        width: 300px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .span5 {
        font-size: 12px;
        opacity: 0.6;
      }
    }
    .Songlist:hover {
      background-color: rgb(238, 234, 234);
    }
    .p {
      background-color: rgb(243, 242, 240);
    }
    .f {
      background-color: rgb(234, 234, 234);
    }
  }
}
</style>